<html>
<head>
 <title>Web Html </title>
</head>
<body>
 <div class="group">
    <input class="todovalue" type="text" name="todovalueName" placeholder="请输入内容" onkeydown="valuechange(event)"/>
    <input type="button" value="BUTTON2" onclick="handleClick()"></input>
    <button type="button" id="button3">BUTTON3</button>
    
    <div id="todoList">
        <!-- <div class="item" id="item0" onmouseenter="test1(0)" onmouseleave="test2(0)">
            <input class="item-chk" type="checkbox"/>
            <div class="item-sp">吃饭0</div>
            <input id="item-del-0" class="item-del" type="button" value="删除" onclick="handleDelClick(0)"></input>
        </div>
        <div class="item" id="item1" onmouseenter="test1(1)" onmouseleave="test2(1)">
            <input class="item-chk" type="checkbox"/>
            <div class="item-sp">吃饭1</div>
            <input id="item-del-1" class="item-del" type="button" value="删除" onclick="handleDelClick(1)"></input>
        </div>
        <div class="item" id="item2" onmouseenter="test1(2)" onmouseleave="test2(2)">
            <input class="item-chk" type="checkbox"/>
            <div class="item-sp">吃饭2</div>
            <input id="item-del-2" class="item-del" type="button" value="删除" onclick="handleDelClick(2)"></input>
        </div>
        <div class="item" id="item3">
            <input class="item-chk" type="checkbox"/>
            <div class="item-sp">吃饭3</div>
            <input id="item-del-0" class="item-del" type="button" value="删除" onclick="handleDelClick(3)"></input>
        </div> -->
        <!-- <div>睡觉</div>
        <div>学习</div>
        <div>吃饭</div> -->
    </div>
 </div>
</body>
<style>
    body{
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }
    .group{
        border: 1px solid black;
        padding: 10px;
        border-radius: 20px;
    }
    .item{
        margin: 3px;
        padding: 3px;
        border-radius: 4px;
        display: flex;
        align-items: center;
    }
    .item:hover{
        background-color: slateblue;
        transform: scale(1.2,1.2);
        /* transition: ; */
    }
    .item-sp{
        flex-grow: 1;
    }
    .item-del{
        background-color: red;
        border: 0px;
        color: aliceblue;
        opacity: 0;
    }
    .item:hover .item-del{
        opacity: 1;
    }
    .todovalue{
        border: 2px solid yellow;
        padding: 6px;
        outline: none;
    }
    .todovalue:focus{
        box-shadow: 0px 0px 9px green;
        border: 2px solid white;
        outline: none;
    }
</style>
<script lang="javascript">
    var index=0;
    function init(){
        document.getElementById("button3").onclick=handleClick;
    }
    function valuechange(e){
        console.log(e);
        if(event.keyCode==13){
            handleClick();
        }
    }
    function handleClick(){
        var temp=document.getElementsByName("todovalueName")[0].value;
        //alert("我被按了"+temp);
        //var t=document.getElementById("todoList").innerHTML;
        //document.getElementById("todoList").innerHTML=t+"<div>"+temp+"</div>";
        var div = document.createElement("div");
        // div.innerText = temp;
        var t = "<div class='item' id='item"+index+"'>"
            + "<input class='item-chk' type='checkbox' />"
            + "<div  class='item-sp'>" + temp + "</div>"
            + "<input id='item-del-"+index+"' class='item-del' type='button' value='删除' onclick='handleDelClick("+index+")'></input>"
            + "</div>"
        index++;
        // div.innerHTML
        // document.getElementById("todoList").innerHTML += div;
        document.getElementById("todoList").innerHTML += t;
        // var div=document.createElement("div");
        // div.innerText=temp;
        // document.getElementById("todoList").append(div);
    }

    function test1(index){
        // console.log("test1");
        // document.getElementById("todoList").children[index].style="background-color:red";
        // document.getElementById("item-del-"+index).style="opacity:1;";
    }
    function test2(index){
        // console.log("test2");
        // document.getElementById("todoList").children[index].style="";
        // document.getElementById("item-del-"+index).style="opacity:0;";
    }
    function handleDelClick(index){
        var arr=document.getElementById("todoList");
        console.log(arr);
        document.getElementById("item"+index).remove();
        //document.getElementById("todoList").removeChild(arr.childNodes[index]);
    }
    init();
    //alert("test");
</script>
</html>